<template>
    <div class="page-login">
      <div class ='page-content' @keyup.enter='trySign_up'>
        <div class="login-modal">
          <button @click='changeToPhone' class='fl' :class='phone_class'>手机号注册(推荐)</button>
          <button @click='changeToEmail' class='fl' :class='email_class'>邮箱注册</button>
          <div v-show='phonePage'>
          <div class='l_username mb17'>
          <input  type='text' :value='username'  v-el:username placeholder="Enter UserName"/>
          </div>
          <div class="l_password mb17">
           <input :type='type' :value='password' v-el:password placeholder="Enter Password"/>
            <i @click='changePW'>click</i>
          </div>
          <div>
            <button @click='trySign_up' class='bg-color sing_up'>Sign up </button>
          </div>
          </div>
          <div v-show='!phonePage'>
            <div class='l_username mb17'>
              <input  type='text' v-model = 'email' v-el:email placeholder="Enter Email"/>
            </div>
            <div class="l_password mb17">
              <input :type='type' v-model = 'email_password' v-el:email_password placeholder="Enter Password"/>
              <i @click='changePW'>click</i>
            </div>
            <div>
              <button @click='trySign_up' class='bg-color sing_up'>Sign up </button>
            </div>
          </div>
          <div>
            <button @click='goback' class='bg-color sing_up'>Already have a Passport </button>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
  import { login_in ,
            sign_up
  } from '../vuex/actions'
  import { getCurrentUser } from '../vuex/getters'
    export default{
      vuex:{
        actions:{
          login_in,
          sign_up
        },
        getters:{
          getCurrentUser,
        }
      },
        data(){
            return{
                type:"password",
                phonePage:true,
                email:'',
                email_password:''
            }
        },
        components:{
        },
      methods:{
        changePW(){
          this.type = this.type == 'password' ? "text" : "password"
        },
        tryLogin_in(){
//          Vue 2.0 是下面这个用法,踩坑了,html中用ref='message' 不用v-el标签.v-el:message
//          const username = this.$refs.username.value;
//          const password = this.$refs.password.value;
          const username = this.$els.username.value;
          const password = this.$els.password.value;
          const user = {
            username : username,
            password : password
          }
          //调用actions方法.这里不存在什么回调一个是否成功啊,什么之类的,
          //思维不同了.这里只是 发送数据到store中,通过mutations来改变state.
          //数据响应式更新.我感觉下面那串代码有问题啊.虽然效果实现了.
          this.login_in(user)
          if(this.getCurrentUser.privilege){
            this.$router.go('/main/home')
          }else{
            alert("用户密码不正确,请重新输入")
          }

        },
        trySign_up(){
          let user = null;
          if(this.phonePage){
            const username = this.$els.username.value;
            const password = this.$els.password.value;
            user = {
              username : username,
              password : password
            }
          }else{
            const email = this.email
            const email_password = this.email_password
            user = {
              username : email,
              password : email_password
            }
          }
          this.sign_up(user)
          if(this.getCurrentUser.privilege){
            alert("注册成功")
            this.$router.go('/main/home')
          }else{
            alert("请检查用户信息,此用户已经被注册")
          }
        },
        changeToEmail(){
          this.phonePage = false
          var el = this.$els.email
          setTimeout(()=>{
            el.focus()
          })
        },
        changeToPhone(){
          this.phonePage = true
          var el = this.$els.username
          setTimeout(()=>{
            el.focus()
          })
        },
        goback(){
          this.$router.go('/Login_in')
        }
      },
      computed:{
        phone_class(){
          return this.phonePage ? 'bg-color focus' : 'bg-color'
        },
        email_class(){
          return this.phonePage ? 'bg-color' : 'bg-color focus'
        }
      },
      ready(){
        var el = this.$els.username
        setTimeout(()=>{
          el.focus()
        },16)
      }
    }
</script>
<style scoped>
  input{
    appearance:none;
    outline: none;
    width:452px;
    height:40px;
    line-height:40px;
    display: inline-block;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    border-style: solid;
    border-width: 1px;
    /*border-radius: 0.3rem;*/
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
    padding:0 10px;
  }
  input:hover{
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
  }
  button{
    width:50%;
    height:40px;
    appearance:none;
    -webkit-appearance:none
  }
  button.sing_up{
    width: 452px;
  }
  .bg-color{
    line-height:40px;
    display: inline-block;
    outline: none;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    border-style: solid;
    border-width: 1px;
    /*border-radius: 0.3rem;*/
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
  }
  .bg-color:hover{
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
  }
  .bg-color.focus{
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
  }
  .page-login{
    background-color: #159957;
    background-image: linear-gradient(120deg, #155799, #159957);
    display: flex;
    justify-content: center;

    padding: 150px 0 208px 0;


  }
  .page-content{
    font-size:16px;
    height:100%;
    width:452px;
    color: #ffffff;
    /*text-align: center;*/
    /*display:flex;*/
    /*justify-content: space-between;*/
    /*align-items: flex-start;*/
  }
  .login-modal{

  }
  .fl{
    float: left;
  }
  .l_username{

  }
  .l_password{
    position: relative;
  }
  .l_password i{
    position: absolute;
    right:0;
    top:8px;
  }
  .mb17{
    margin-bottom: 17px;
  }
  .display_none{
    display:none;
  }
  .display_block{
    display:block;
  }
</style>
